<!doctype html>
<html lang="en">
{% load static %}
<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <!-- 上述meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="{% static "css/bootstrap.min.css" %}"/>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.7.0/font/bootstrap-icons.css"/>
    <link rel="stylesheet" href="{% static "css/toastr.min.css" %}"/>
    <link rel="stylesheet" href="{% static "css/sweetalert.css" %}"/>
    <link rel="stylesheet" href="{% static "css/select2.min.css" %}"/>
    <link rel="stylesheet" href="{% static "css/main.css" %}"/>
    <link rel="SHORTCUT ICON" href="{% static "img/favicon.ico" %}"/>
    <title>总工程页面</title>
</head>
<body id="bg">
{#<body style="background: #8c939d">#}
<!-- 以下三者的引用顺序是固定的 jQuery first, then Popper.js, then Bootstrap JS -->
<script src="{% static "js/jquery.js" %}"></script>
<script src="{% static "js/popper.js" %}"></script>
<script src="{% static "js/bootstrap.min.js" %}"></script>
<!-- sweetalert, toastr, snowflakes -->
<script src="{% static "js/sweetalert.js" %}"></script>
<script src="{% static "js/toastr.min.js" %}"></script>
<script src="{% static "js/snowflakes.js" %}"></script>
<script src="{% static "js/select2.min.js" %}"></script>
<div class="container" id="ct">
    <div class="app">
        <div class="app-bg animated"></div>
        <div style="height: 100px"></div>
        <select id="project-select" style="width: 300px;">
        </select>
        <div style="height: 50px"></div>
        <select id="project-env" style="width: 200px" onchange="set_env(this.value)">
            <option value="1">开发环境</option>
            <option value="2">测试环境</option>
            <option value="3">生产环境</option>
        </select>
        <div style="height: 50px"></div>
        <button type="button" class="btn btn-primary btn-lg shadow-lg" onclick="to_log()">
            <i class="bi bi-cursor-fill"></i> GO
        </button>
    </div>
</div>

<script type="text/javascript">
    let env = '1';
    let pt = -1;
    let timer;
    toastr.options = {
        closeButton: false,
        debug: false,
        progressBar: true,
        positionClass: "toast-top-center",
        onclick: null,
        showDuration: "300",
        hideDuration: "1000",
        timeOut: "2000",
        extendedTimeOut: "1000",
        showEasing: "swing",
        hideEasing: "linear",
        showMethod: "fadeIn",
        hideMethod: "fadeOut"
    };

    $(function () {
        $('#project-select').select2({
            placeholder: '请选择总工程',
            fontSize: 14,
            ajax: {
                url: '/chart/main/',
                dataType: 'json',
                delay: 250,
                data: function (params) {
                    return {
                        search: params.term,
                    };
                },
                processResults: function (data) {
                    return {
                        results: data.ps
                    };
                },
                cache: true
            },
        });
        $('#project-env').select2({
            minimumResultsForSearch: -1
        });
    })

    function loading(port) {
        swal({
            title: 'loading...',
            text: 'Please wait a moment!',
            type: 'warning',
            showCancelButton: false,
            showConfirmButton: false,
            timer: 3000,
        }, function () {
            if (port === 8001) {
                window.location.href = '/admin/';
            } else {
                window.location.href = 'http://192.168.18.13:' + port + '/admin/';
            }
        });
    }

    // 判断是否不是数字
    function isNotNum(val) {
        if (val === "" || val == null) {
            return true;
        }
        return isNaN(val);
    }

    function set_up(pid, force) {
        const httpRequest = new XMLHttpRequest();
        httpRequest.open('POST', '/chart/setup/', true);
        httpRequest.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
        httpRequest.send("pid=" + pid + "&env=" + env + "&force=" + force);
        httpRequest.onreadystatechange = function () {
            if (httpRequest.readyState === 4 && httpRequest.status === 200) {
                const json = httpRequest.responseText;
                const obj = JSON.parse(json);
                const port = obj["port"];
                const user = obj["user"];
                console.log('port:', port);
                console.log('login_user:', user);
                if (port === 'false') {
                    toastr.warning('该项目暂未配置该环境！')
                } else if (isNotNum(port)) {
                    force_switch(pid, port, user)
                } else {
                    loading(port)
                }
            }
        };
    }

    function to_log() {
        const val = $('#project-select').select2('val')
        if (val) {
            console.log('pid：' + val);
            console.log('env：' + env);
            set_up(val, 0);
        } else {
            toastr.warning('请选择一个总工程！');
        }
    }

    function set_env(env_sel) {
        env = env_sel;
    }

    function force_switch(pid, env, user) {
        swal({
            title: '确认强制切换环境么？',
            text: '【' + user + '】正在使用【' + env + '】环境！',
            type: 'warning',
            showCancelButton: true,
            confirmButtonText: '确认',
            cancelButtonText: '取消',
            closeOnConfirm: false,
            closeOnCancel: false
        }, function (isConfirm) {
            if (isConfirm) {
                swal({
                    title: "切换成功！",
                    timer: 1000,
                    type: "success"
                })
                set_up(pid, 1)
            } else {
                swal({
                    title: "取消切换！",
                    timer: 1000,
                    type: "error"
                })
            }
        });
    }

</script>

<script type="text/javascript">
    const sf = new Snowflakes({
        color: "#ffffff",
        count: 75,
        minOpacity: 0.2,
        maxOpacity: 0.6
    });
</script>
<script src="{% static "js/switchbg.js" %}"></script>

</body>

</html>